<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no">
	<meta name='apple-itunes-app' content='app-id=869299193'>
	<script src="../static/bootstrap/js/jquery.js"></script>
	<title>快快加入虎扑跑步，和好友约跑吧！</title>
	<style>
		*,*:before, *:after {-webkit-box-sizing: border-box;-moz-box-sizing: border-box;box-sizing: border-box;}
		html, body {height: 100%;-webkit-tap-highlight-color: rgba(0,0,0,0);}
		body, h3, p{ margin: 0;}
		.clear {clear: both;}
		/*section{display: block;}*/
		.userInfo{width:100%;
			/*height:1088px;*/
			/*background:url(../static/backend/invite/main-bg.png) top center no-repeat;*/
			/*background:url('../static/backend/invite/main-bg.png');*/
			/*filter:"progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod='scale')";*/
			/*-moz-background-size:100% 100%;*/
			/*background-size:100% 100%;*/
		}
		.backImg {margin: 0 auto;text-align: center;z-index: -1;}
		.backImg img{width: 100%;}
		.main-con{margin:auto 0;position: absolute;z-index: -2}
		.portrait{position: relative;float:left;}
		.portrait .por-img{border:6px solid #c9d4e5;}
		.portrait .gender{position: absolute;width:22px;height:22px;right:16px;bottom:5px;}
		.username {float: left;margin-left: 25px;margin-top:5px;position: relative;}
		.username h3 {max-width: 200px;font-size: 28px;color: #fff;margin-bottom: 10px;overflow: hidden;text-overflow: ellipsis;white-space: nowrap;padding: 0;}
		.username p {height: 40px;color: #fff;}
		.username p img {width: 34px;height: 34px;margin-right: 7px;vertical-align: middle;}
		.username p span {font: 24px/30px 'microsoft yahei';vertical-align: middle;}
		.dialog {position: relative;display: block;margin-top:50px;}
		.dialog .run-words {margin-bottom: 15px;}
		.dialog .run-img {}
		.dialog .run-img img{width: 80%;}
		.dialog p {font:16px/35px 'microsoft yahei';margin-left:-9px;text-decoration: none; font-weight: bold; color: #736a53; text-shadow: 1px 1px 0px #fcebc4,-1px -1px 0px #fcebc4,1px -1px 0px #fcebc4,-1px 1px 0px #fcebc4;}
		.dialog strong {font-size: 20px;}
		.other-con {padding: 0 15px 0;margin-top:-60px;z-index: 200;position: relative;}
		.other-con a {display: block;height: 45px;background: url(../static/backend/invite/btn_nor.png) 0 0 repeat-x;border-radius: 5px;text-align: center;font: 17px/45px 'microsoft yahei';text-decoration: none;color: #fff;margin-bottom: 30px;}
		.other-con a.on {background-image: url(.. /static/backend/invite/btn_press.png);}
		.intro-img img {width: 100%;}
		.shadowDiv{width:100%;display: none;}
		div.on{display: block;}
		.shadowDiv img {width: 100%;position:absolute;top:0;z-index: 100;}
		#point{width: 100%;top:0;}
	</style>
	<script type="text/javascript">
	$(document).ready(function() {
		$(".backImg>img").load(function(ele){
			imgHeight = $(this).height();
			imgWidth = $(this).width();
			headerHeight = imgHeight * 0.2 > 200 ? 180 : 100;
			// 修改图片尺寸
			// alert(imgWidth);
			$(".portrait .por-img").css("border-radius", headerHeight*0.5);
			$(".portrait .por-img").css("width", headerHeight);
			$(".portrait .por-img").css("height", headerHeight);
			$(".username").css("height", headerHeight);
			infoWidth = $(".portrait").width() + $(".username").width();
			infoHeight = $(".portrait").height() + $(".username").height();
			$(".main-con").css("left", (imgWidth-infoWidth)*0.6);
			$(".main-con").css("top", imgHeight*0.44-infoHeight*0.5);
			$(".main-con").css("z-index", "100");

			if($(".dialog>.run-words").text() == '') $(".dialog").css("margin-top", "70px");
		});
		var isAppInstalled = "{$isAppInstalled}";
		var isAndroid = false;
		var iPhone = false;
		var userAgent = navigator.userAgent;
		var downloadUrl = "http://mobile.hupu.com/download/joggers?r=share";
		var uid = "{$userInfo['uid']}";
		if (userAgent.match("Android")){
			isAndroid = true;
		}else if (userAgent.match("iPhone")){
			iPhone = true;
			downloadUrl = "http://itunes.apple.com/cn/app/hu-pu-pao-bu/id869299193?mt=8";
		}
		var word = '下载虎扑跑步客户端';
		var url = downloadUrl;
		if(isAppInstalled == 1 || isAppInstalled == 3)
		{
			 word = "{$isShare}" == '1'?'查看Ta的主页':'打开并添加好友';
			 url = "{$isShare}" == '1'?'joggers://profile/'+uid:'joggers://invite/'+uid
		}
		else if(isAppInstalled == 0 || isAppInstalled == 2)
		{
			word = '下载虎扑跑步客户端';
			url = downloadUrl;
		}
        $("#openBtn").text(word);
        $("#openBtn").attr("href",url);

        if(isAppInstalled == 0 || isAppInstalled == 1)
    	{
    		pointImg = 'http://irun.hupu.com/static/backend/wpoint_';
	    	pointImg += iPhone ? '2' : '1';
	    	pointImg += '.png?1';
	    	$("#point").attr("src", pointImg);
    	}
        $("#openBtn").click(function(e){
        	if(isAppInstalled == 0 || isAppInstalled == 1) //在微信中打开
        	{
        		// 阻止超链接跳转
        		e.preventDefault();
        		height = $(document).height();
        		$("#shadow").attr("height",height);
		    	$("div#shadowDiv").addClass("on");
        	}
        	else if(isAppInstalled = -1)
        	{
        		// 阻止超链接跳转
        		e.preventDefault();
        		var startTime = Date.now();
				div = document.createElement('div');
				div.style.visibility = 'hidden';
				div.innerHTML = '<iframe id="schema" src="' + url + '" scrolling="no" width="1" height="1"></iframe>';
				document.body.appendChild(div);

				var delta = Date.now() - startTime;
				if(delta < 200){
					setTimeout(function(){
						window.location.href = downloadUrl;
					}, 500);
				}
        	}
        });
        if(isAppInstalled == 3) // 从微信中跳转到浏览器 已安装
    	{
    		var startTime = Date.now();
			div = document.createElement('div');
			div.style.visibility = 'hidden';
			div.innerHTML = '<iframe id="schema" src="' + url + '" scrolling="no" width="1" height="1"></iframe>';
			document.body.appendChild(div);
    	}
    	else if(isAppInstalled == 2) //从微信中跳转到浏览器, 未安装
    	{
    		window.location.href = downloadUrl;
    	}
         $(".shadowDiv").click(function(e){
         	$("#shadow").attr("height",0);
         	$(this).removeClass("on");
         });
    });
	</script>
</head>
<body>
	<section class="userInfo">
		<div class="backImg" id="backImg">
			<img src="../static/backend/invite/main-bg.png" />
		</div>
		<div class="main-con">
			<div class="info-con">
				<div class="portrait">
					<img src="{$userInfo['header']}" alt="" class="por-img">
					<img src="../static/backend/gender_{$userInfo['gender']}.png" class="gender">
				</div>
				<div class="username">
					<h3>{$userInfo['nickname']}</h3>
					<p><img src="../static/backend/level_modal/level_{$userInfo['levelInfo']['level']}.png" alt="">
						<span>{$userInfo['levelInfo']['title']}</span></p>
				</div>
			</div>
			<div class="clear"></div>
			<div class="dialog">
				{if $words != ''}
			    <div class="run-words">
			    	{$words}
			    </div>
			    {/if}
			    <!-- <div class="run-img">
					<img src="{$runImg}">
			    </div> -->
			</div>
		</div>
	</section>
	<section>
		<div class="other-con">
			<a id="openBtn">下载虎扑跑步客户端</a>
			<!-- <a id="openBtn" href="{$url}">下载虎扑跑步客户端</a> -->
		</div>
		<div class="intro-img">
			<img src="../static/backend/invite/intro-img.png" alt="">
		</div>
	</section>
	<div class="shadowDiv" id="shadowDiv">
		<img src="../static/backend/invite/share_shadow.png" id="shadow" />
		<img src="" id="point" />
	</div>
	<script>
		document.getElementById('openBtn').addEventListener('touchstart',function(e){
			this.className = 'on';
		});
		document.addEventListener('touchend',function(e){
			this.className = '';
		})
	</script>
	<!-- 
	<script src="../static/bootstrap/js/hippo2.js"></script>
    <script type="text/javascript">
        _hip.push(['mv', {module: 'qzone-freeeating',action:'browse'}]);
    </script>
    -->
</body>
</html>